var nxtApp = angular.module('NxtMap'); 
nxtApp.directive("mapSummary", function () {  
  return {  
    restrict: 'AE',  
    transclude: true,  
    template: '<div class="summary-wrapper"><div class="summary-toggle" ng-class="{\'fold\': isSummaryFold}"><button class="btn" ng-click="toggleSummary()"><img src="../img/arrow_1.png" ng-class="{\'toggle\': isSummaryFold}"></button></div><div class="summary-content" ng-class="{\'fold\': isSummaryFold}" ng-transclude></div></div>',
    link : function(scope, element, attrs) {
      scope.isSummaryFold = true;
      scope.toggleSummary = function toggle() {
        scope.isSummaryFold = !scope.isSummaryFold;
      }
    }
  };
});

nxtApp.directive("summaryList", function () {  
  return {  
    require: '^mapSummary',  
    restrict: 'AE',  
    transclude: true,  
    template: '<div class="summary-list" ng-transclude></div>'  
  };  
});  

nxtApp.directive("summaryBlock", function () {  
  return {  
    require: '^summaryList',  
    restrict: 'AE',  
    transclude: true,  
    template: '<div class="summary-block" ng-transclude></div>'  
  };  
});

nxtApp.directive("blockHeader", function () {  
  return {  
    require: '^summaryBlock',  
    restrict: 'AE',  
    transclude: true,  
    template: '<div class="block-header" ng-transclude></div>'  
  };  
});

nxtApp.directive("blockContent", function () {  
  return {  
    require: '^summaryBlock',  
    restrict: 'AE',  
    transclude: true,  
    template: '<div class="block-content" ng-transclude></div>'  
  };  
});
